<template>
  <view class="login-container">
    <view class="login-form">
      <!-- 账号输入框 -->
      <view class="input-item">
        <text class="label">账号</text>
        <input class="input" v-model="username" placeholder="请输入账号" />
      </view>

      <!-- 密码输入框 -->
      <view class="input-item">
        <text class="label">密码</text>
        <input class="input" v-model="password" placeholder="请输入密码" password />
      </view>

      <!-- 岗位选择下拉框 -->
      <view class="input-item">
        <text class="label">岗位</text>
        <picker class="picker" mode="selector" :range="positions" :value="positionIndex" @change="onPositionChange">
          <view class="picker-text">{{ positions[positionIndex] }}</view>
        </picker>
      </view>

      <!-- 登录按钮 -->
      <button class="login-button" @click="handleLogin()">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '', // 账号
      password: '', // 密码
      positions: [], // 岗位列表（动态获取）
      positionIds: [], // 岗位ID列表
      positionIndex: 0, // 当前选中的岗位索引
      socketTask: null, // WebSocket 实例
      isConnected: false, // 是否已连接
    };
  },
  onLoad() {
    // 页面加载时调用接口获取岗位数据
    this.fetchPositions();
  },
  methods: {
    // 获取岗位数据
    fetchPositions() {
      uni.request({
        url: 'http://127.0.0.1:1101/post/list', // 后台接口地址
        method: 'GET', // 请求方法
        success: (res) => {
          if (res.statusCode === 200) {
            const data = res.data.data; // 获取 data 字段
            if (Array.isArray(data)) {
              this.positions = data.map(item => item.postName); // 岗位名称列表
              this.positionIds = data.map(item => item.postId); // 岗位ID列表
            } else {
              console.error('接口返回数据不是数组:', data);
              uni.showToast({
                title: '接口返回数据格式错误',
                icon: 'none',
              });
            }
          }
        },
        fail: (err) => {
          console.error('请求失败', err);
          uni.showToast({
            title: '网络请求失败',
            icon: 'none',
          });
        },
      });
    },

    // 岗位选择改变事件
    onPositionChange(e) {
      this.positionIndex = e.detail.value;
    },

    // 登录按钮点击事件
    handleLogin() {
      const { username, password, positionIndex, positionIds } = this;
      // 获取当前选中的岗位ID
      const postId = positionIds[positionIndex];

      if (!username || !password) {
        uni.showToast({
          title: '账号和密码不能为空',
          icon: 'none',
        });
        return;
      }

      // 显示加载提示
      uni.showLoading({
        title: '登录中...',
      });

      // 发送登录请求
      uni.request({
        url: 'http://127.0.0.1:1101/user/login', // 登录接口地址
        method: 'POST',
        header: {
          'Content-Type': 'application/json', // 设置请求头为 JSON
        },
        data: {
          username: username,
          password: password,
          postId: postId,
        },
        success: (res) => {
          uni.hideLoading(); // 隐藏加载提示
          if (res.statusCode === 200) {
            // 登录成功
            if (res.data.code === 200) {
              uni.showToast({
                title: '登录成功',
                icon: 'success',
              });
              const userId = res.data.data.id;
              const expiration = Date.now() + 3600 * 1000; // 设置有效期为1小时，可根据需求调整
              try {
                //本地同步存储
                uni.setStorageSync('userIdInfo', { userId, expiration, postId });
              } catch (e) {
                console.error('用户ID存储失败:', e);
              }

              // 在这里启动 WebSocket 连接
              this.initWebSocket(userId, postId); // 调用方法进行 WebSocket 连接

              // 根据岗位ID跳转到不同页面
              this.navigateBasedOnPostId(postId);
            } else if (res.data.code === 400) {
              // 登录失败
              uni.showToast({
                title: '账号或密码错误',
                icon: 'none',
              });
              // 刷新页面
              this.username = '';
              this.password = '';
            }
          } else {
            // 请求失败
            uni.showToast({
              title: '登录失败，请重试',
              icon: 'none',
            });
          }
        },
        fail: (err) => {
          uni.hideLoading(); // 隐藏加载提示
          console.error('请求失败', err);
          uni.showToast({
            title: '网络请求失败',
            icon: 'none',
          });
        },
      });
    },

    // 根据岗位ID跳转到不同页面
    navigateBasedOnPostId(postId) {
      if (postId === 6) {
        // 质检员跳转到专属主页
        uni.switchTab({
          url: '/pages/index/index', // 替换为实际的 tabbar 页面路径
        });
      } else if (postId === 3) {
        // 车间主任跳转到专属主页
        uni.redirectTo({
          url: '/pages/workshopUser/index/index',
        });
      } else if (postId === 7) {
        // 维修维护跳转到专属主页
        uni.redirectTo({
          url: '/pages/equipment/index/index',
        });
      }else if(postId===2){
			//办公主任专属主页
			uni.redirectTo({
			url: '/pages/banGong/index/index'
		});
		}
		else if(postId===1){
			//CEO专属主页
			uni.redirectTo({
			url: '/pages/boos/index/index'
			});
		}
    },

    // 初始化 WebSocket 连接
    initWebSocket(userId, postId) {
      let socketUrl = '';
      // 根据岗位ID选择不同的 WebSocket 路径
      switch (postId) {
		case 6:
		  socketUrl = `ws://127.0.0.1:1005/websocket?userId=${userId}`;
		break;
		case 6:
		  socketUrl = `ws://127.0.0.1:1005/websocket?userId=${userId}`;
		break;
		case 6:
		  socketUrl = `ws://127.0.0.1:1005/websocket?userId=${userId}`;
		break;
		  
        case 6:
          socketUrl = `ws://127.0.0.1:1005/websocket?userId=${userId}`;
          break;
        case 3:
          socketUrl = `ws://127.0.0.1:1001/websocket?userId=${userId}`;
          break;
        case 7:
          socketUrl = `ws://127.0.0.1:1000/websocket?userId=${userId}`;
          break;
        default:
          console.log('未知岗位ID，无法连接 WebSocket');
          return;
      }

      // 连接 WebSocket
      this.socketTask = uni.connectSocket({
        url: socketUrl,
        success: () => {
          console.log(`WebSocket 连接成功，地址: ${socketUrl}`);
          this.isConnected = true;
        },
        fail: (err) => {
          console.error('WebSocket 连接失败', err);
        },
      });

      // 监听 WebSocket 消息
      this.socketTask.onMessage((res) => {
        console.log("收到服务器消息:", res.data);
        // 使用全局事件发送消息
        uni.$emit('websocketMessageReceived', res.data);
      });

      // 监听 WebSocket 连接打开
      this.socketTask.onOpen(() => {
        console.log("WebSocket 连接成功");
        this.isConnected = true;
      });

      // 监听 WebSocket 连接关闭
      this.socketTask.onClose(() => {
        console.log("WebSocket 连接关闭");
        this.isConnected = false;
      });

      // 监听 WebSocket 错误
      this.socketTask.onError((err) => {
        console.error("WebSocket 发生错误", err);
        this.isConnected = false;
      });
    },

    // 关闭 WebSocket 连接
    closeWebSocket() {
      if (this.socketTask) {
        this.socketTask.close();
        this.isConnected = false;
      }
    },

    // 发送消息
    sendMessage(msg) {
      if (this.isConnected) {
        this.socketTask.send({
          data: JSON.stringify({ userId: this.userId, message: msg }),
          success: () => console.log("消息发送成功"),
          fail: (err) => console.error("消息发送失败", err),
        });
      } else {
        console.error("WebSocket 未连接，无法发送消息");
      }
    },
  },
};
</script>


<style  scoped>
  .login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f5f5f5;
  }

  .login-form {
    width: 80%;
    padding: 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }

  .input-item {
    margin-bottom: 40rpx;
  }

  .label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    display: block;
  }

  .input {
    height: 80rpx;
    padding: 0 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    font-size: 28rpx;
  }

  .picker {
    height: 80rpx;
    line-height: 80rpx;
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
  }

  .picker-text {
    color: #333;
  }

  .login-button {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #007aff;
    color: #fff;
    font-size: 32rpx;
    border-radius: 10rpx;
    margin-top: 40rpx;
  }
</style>
